import React, { Component } from 'react';
import {connect} from 'react-redux'
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
import { API_URL } from '../../../../env';

// 引入css
import './index.css'
class UploadHeader extends Component {
    
    render() {

        const { baseUserInfoState } = this.props

        const props = {
            name: 'HeadImgFile',
            data: {username: baseUserInfoState.username},
            // accept: ".jpg,", // 让用户点开自动过滤其他类型图片，只有jpg图片
            action: API_URL + 'get_img/upload_head_img',
            headers: {
                authorization: 'authorization-text',
            },
            maxCount: 1,
            onChange(info) {
                    if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                    }
                    if (info.file.status === 'done') {
                    message.success(`${info.file.name} file uploaded successfully`);
                    } else if (info.file.status === 'error') {
                    message.error(`${info.file.name} file upload failed.`);
                    }
                },
            // beforeUpload: (file) => {
            //     if (file.type !== "image/jpeg") {
            //         message.error("仅支持上传jpg/png格式的文件");
            //         }
            //     return file.type === "image/jpeg";
            // },
        }
            
        return (
            <div className='uploadHeader'>
                <ImgCrop 
                    rotate='true' 
                    shape='round' 
                    modalTitle='头像裁剪' 
                    modalOk='确认' 
                    modalCancel='取消'
                >
                    <Upload {...props}>
                        <Button type='dashed' icon={<UploadOutlined />}>修改头像</Button>
                    </Upload>
                </ImgCrop>
            </div>
        )
    }
};
 export default connect(
     state => ({
        baseUserInfoState: state.PublicReducer.baseUserInfo
     }),
     {}
 )(UploadHeader)